<template>
  <div class="zfw-table" ref="tableRef">
    <el-table v-loading="loading" :data="tableData" v-bind="$attrs" :max-height="maxHeight"
      @selection-change="handleSelectionChange">
      <template v-for="item in column">
        <template v-if="!item.isSlot">
          <el-table-column v-bind="item" />
        </template>
        <template v-else>
          <el-table-column v-bind="item">
            <template #default="{ row }">
              <slot :name="item.prop" :row="row" />
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <div class="flex-rowr mt15">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ZfwTable',
  props: {
    column: {
      type: Array,
      default: () => []
    },
    onSearch: {
      type: Function,
      default: () => { }
    },
    isFirst: {
      type: Boolean,
      default: true
    },
    params: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      tableData: [],
      total: 0,
      maxHeight: 0,
      loading: false
    }
  },
  watch: {
    params: {
      async handler() {
        try {
          this.loading = true
          await this.getTable()
        } finally {
          this.loading = false
        }

      },
      deep: true
    }
  },
  async created() {
    try {
      if (this.isFirst) {
        this.loading = true
        this.getTable()
      }
      this.$nextTick(() => {
        const element = this.$refs.tableRef;
        const screenHeight = document.documentElement.clientHeight
        const distanceFromTop = element.getBoundingClientRect().top + window.pageYOffset + 80
        this.maxHeight = screenHeight - distanceFromTop
      })
    } finally {
      this.loading = false
    }

  },
  methods: {
    // 调用接口赋值
    async getList(params) {
      const { list, total } = await this.onSearch(params)
      this.tableData = list || []
      this.total = total || 0
    },
    // 刷新当前页table
    refreshTable() {
      this.getList({ pageNum: this.currentPage, pageSize: this.pageSize, ...this.params })
    },
    // 从第一页渲染table
    getTable() {
      this.currentPage = 1
      this.getList({ pageNum: this.currentPage, pageSize: this.pageSize, ...this.params })
    },
    async handleSizeChange(value) {
      try {
        this.loading = true
        await this.getList({ pageNum: this.currentPage, pageSize: value, ...this.params })
      } finally {
        this.loading = false
      }

    },
    async handleCurrentChange(value) {
      try {
        this.loading = true
        await this.getList({ pageNum: value, pageSize: this.pageSize, ...this.params })
      } finally {
        this.loading = false
      }

    },
    handleSelectionChange(selection) {
      this.$emit('selectChange', selection)
    }
  }
}
</script>
<style lang="scss" scoped>
.mt15 {
  margin-top: 15px;
}

.zfw-table {
  padding: 0 15px;
}

.flex-rowr {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
